<template>
  <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
    <!-- 歌单顶部 -->
    <SongTop :playlist="playlist" ref="songTopRef"></SongTop>

    <!-- 歌曲列表 -->
    <SongList :playlist="playlist" :songlist="songlist" ref="songlistRef"></SongList>

  </van-pull-refresh>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import { playlistDetail, getMuiscList } from '@/request/api/musicApi'
import SongList from '@/components/music/SongList.vue'
import SongTop from '@/components/music/SongTop.vue'

const $route = useRoute();

onMounted(() => {
  onRefresh();
});

// 进入后触发下拉刷新，并获取数据
let pullLoading = ref(false);
const onRefresh = () => {
  initData();
}

let $data = reactive({
  playlist: [],
  songlist: []
})
const { playlist, songlist } = toRefs($data);

let musicListId = $route.query.id || 0;
const songlistRef = ref();
const songTopRef = ref();

// 初始化
const initData = () => {
  getPlayList();
  getSongList();
}

const getPlayList = async () => {
  await playlistDetail({ id: musicListId }).then(data => {
    playlist.value = data.playlist;
    
    pullLoading.value = false;
    songTopRef.value.skeLoading = false;
  })
}

const getSongList = async () => {
  await getMuiscList({ id: musicListId,limit:50 }).then(data => {
    songlistRef.value.showLoadingIcon = false
    songlist.value = data.songs;
  })
}
</script>
  
<style lang='less' scoped>
</style>

